import React, { useState, useEffect } from 'react';
import ReactDOM from 'react-dom';
import { Area } from '@ant-design/plots';

export type areaProps = {
  height?: number;
  color?: string;
  xAxisData?: {};
  yAxisData?:{};
  xField?:string, //timePeriod
  yField?:string, //value
  forceFit?: boolean;
  data:{ timePeriod: string; value: number; }[];
};

const AreaChart:React.FC<areaProps> =  (props) => {
  const height = props.height || 100;
  let xAxisData = props.xAxisData || {};
  let yAxisData = props.yAxisData || {};
  let xAxis ={label:null,text:null,line:null,tickLine:null,grid:null,...xAxisData}
  let yAxis ={label:null,text:null,line:null,tickLine:null,grid:null,...yAxisData}
  let data = props.data?props.data:[]
  const config = {
    data,
    autoFit:true,
    xField: props.xField,
    yField: props.yField,
    smooth:true,
    xAxis: xAxis,
    yAxis: yAxis,
  };

  return (
    <div style={{ height:height,width:'100%' }}>
      {height>0 && data.length>0 &&
        <Area {...config} />
      }
    </div>
  );
};
export default AreaChart;